<template>
  <div>
    <template v-for="(menu, key) in chil">
        <el-submenu :index="menu.id+''" :key="key" v-if="menu.children && menu.children.length > 0">
          <template slot="title">
            <i :class="menu.icon"></i>
            {{ menu.name }}
          </template>
          <sub-item :chil="menu.children" @getSubItem="onSubTtemClick" />
        </el-submenu>
        <el-menu-item :index="menu.id+''" v-else :key="key" @click="onSubTtemClick(menu)">
          <i :class="menu.icon"></i>
          {{ menu.name }}
        </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "subItem",
  props: {
    chil: {
      type: Array,
      default() {
        return [];
      },
    }
  },
  methods: {
    // 当前菜单点击
    onSubTtemClick(item) {
      this.$emit("getSubItem", item);
    },
  },
};
</script>
